<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多点惠农产业链交易平台</title>
    <link rel="stylesheet" href="component/pear/css/pear.css" />
    <link rel="stylesheet" href="component/elementUI/index.css" />
    <link rel="stylesheet" href="style/index.css" />
    <link rel="stylesheet" href="style/register.css" />
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="form">
        <div class="title">
          已有账号？<el-button
            style="color: rgb(95, 103, 219)"
            type="text"
            @click="window.location.href='login.html'"
            >去登录</el-button
          >
        </div>
        <div class="register">注册</div>
        <el-tabs
          style="width: 600px"
          v-model="activeName"
          class="my-tabs"
          type="border-card"
          @tab-click="handleClick"
        >
          <el-tab-pane label="我是员工" name="first">
            <!-- 员工注册 -->
            <div class="staff">人员信息</div>
            <el-form
              :model="system_user_info1"
              status-icon
              :rules="rules"
              ref="system_user_info1"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="公司名称">
                <el-input
                  @change="ChangeEnterpriseName"
                  class="my-input"
                  v-model="Enterprise_Name"
                  autocomplete="off"
                ></el-input>
                <span v-show="show1" style="color: brown">该企业未注册</span>
              </el-form-item>
              <el-form-item label="姓名" prop="ID_Name">
                <el-input
                  v-model="system_user_info1.ID_Name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="ID_SerialNumber">
                <el-input
                  v-model="system_user_info1.ID_SerialNumber"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="User_Number">
                <el-input v-model="system_user_info1.User_Number"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="Pass_Ward">
                <el-input
                  type="password"
                  placeholder="数字、字母、下划线任意两种组合"
                  v-model.trim="system_user_info1.Pass_Ward"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass3">
                <el-input
                  type="password"
                  v-model="system_user_info1.checkPass3"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  style="font-size: 20px; width: 70%"
                  :loading="loading"
                  @click="submitForm('system_user_info1')"
                  >加入企业</el-button
                >
                <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="我是企业" name="second">
            <div class="staff">企业信息</div>
            <!-- 企业注册 -->
            <div style="display: flex; align-items: center">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <div class="preview" v-if="imageUrl!=''">
                  <el-image
                    class="el-upload-list__item-thumbnail"
                    style="width: 148px; height: 148px"
                    :src="imageUrl"
                    fit="contain"
                  ></el-image>
                  <span class="el-upload-list__item-actions">
                    <span @click="handlePictureCardPreview()"
                      ><i class="el-icon-zoom-in"></i
                    ></span>
                    <span @click="handleRemove()"
                      ><i class="el-icon-delete"> </i
                    ></span>
                  </span>
                </div>
                <el-upload
                  v-else
                  class="upload-demo"
                  :show-file-list="false"
                  list-type="picture-card"
                  action=""
                  accept="image/*"
                  :before-upload="uploadBanner"
                >
                  <i
                    slot="default"
                    :class="!loading1?'el-icon-plus':'el-icon-loading'"
                  ></i>
                  <div class="el-upload__tip" slot="tip">
                    上传图片用于直接识别企业，且大小不超过100kb
                  </div>
                </el-upload>
              </div>
              <div>
                <el-form
                  :model="enterprise_info"
                  status-icon
                  ref="system_user_info"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="企业名称" prop="Enterprise_Name">
                    <el-input
                      placeholder="请输入企业名称"
                      style="width: 250px"
                      @change="ChangeEnterpriseName"
                      v-model="enterprise_info.Enterprise_Name"
                      autocomplete="off"
                    ></el-input>
                    <span v-show="show" style="color: brown"
                      >该企业已被注册</span
                    >
                  </el-form-item>
                  <el-form-item label="企业地址" prop="address">
                    <el-cascader
                      @change="change"
                      v-model="address"
                      filterable
                      :props="{value:'label'}"
                      :options="city"
                      style="width: 100%"
                    ></el-cascader>
                  </el-form-item>
                  <el-form-item
                    label="详细地址"
                    prop="addressDetail"
                    :rules="{ required: true, message: '详细地址不能为空', trigger: 'change' }"
                  >
                    <el-input
                      :disabled="address.length!=3"
                      placeholder="请输入详细地址"
                      style="width: 250px"
                      @change=""
                      v-model="addressDetail"
                    ></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="所乡镇属">
                                    <el-select @change="SelectAddressDetail" style="width: 100%" v-model="addressDetail"
                                        clearable placeholder="请选择所乡镇属">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item> -->
                  <el-form-item label="执照编号" prop="Tax_Number">
                    <el-input
                      type="text"
                      placeholder="请输入执照编号"
                      @change="a"
                      v-model="enterprise_info.Tax_Number"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="staff">管理员信息</div>
            <el-form
              :model="system_user_info"
              status-icon
              :rules="rules"
              ref="enterprise_info"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="姓名" prop="ID_Name">
                <el-input
                  placeholder="请输入管理员姓名"
                  v-model="system_user_info.ID_Name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="ID_SerialNumber">
                <el-input
                  placeholder="请输入管理员身份证号"
                  v-model="system_user_info.ID_SerialNumber"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="User_Number">
                <el-input
                  placeholder="请输入管理员手机号"
                  v-model="system_user_info.User_Number"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="Pass_Ward">
                <el-input
                  type="password"
                  placeholder="数字、字母、下划线任意两种组合"
                  v-model.trim="system_user_info.Pass_Ward"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input
                  type="password"
                  placeholder="请再次输入密码"
                  v-model="system_user_info.checkPass"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  :loading="loading"
                  style="font-size: 20px; width: 70%"
                  @click="submitEnterpriseForm('enterprise_info')"
                  >创建企业</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="imageUrl" alt="" />
      </el-dialog>
    </div>
    <script type="text/javascript" src="component/layui/layui.js"></script>
    <script type="text/javascript" src="component/pear/pear.js"></script>
    <script type="text/javascript" src="utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="utils/vue.min.js"></script>
    <script type="text/javascript" src="component/elementUI/index.js"></script>
    <script type="text/javascript" src="utils/utils.js"></script>
    <script type="text/javascript" src="utils/compressor.js"></script>
    <script type="text/javascript" src="utils/ID_Validity.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          var pwdValidator2 = (rule, value, callback) => {
            if (value === "") {
              callback(new Error("请再次输入密码"));
            } else if (value !== this.system_user_info.Pass_Ward) {
              callback(new Error("两次输入密码不一致!"));
            } else {
              callback();
            }
          };
          var pwdValidator3 = (rule, value, callback) => {
            if (value === "") {
              callback(new Error("请再次输入密码"));
            } else if (value !== this.system_user_info1.Pass_Ward) {
              callback(new Error("两次输入密码不一致!"));
            } else {
              callback();
            }
          };
          //校验身份证号
          var validatePass3 = (rule, value, callback) => {
            if (!value) {
              return callback(new Error("请输入身份证号"));
            } else {
              callback();
            }
            setTimeout(() => {
              if (!ID_Validity(value)) {
                callback(new Error("请输入正确的身份证号"));
              } else {
                callback();
              }
            }, 100);
          };
          var validatePass4 = (rule, value, callback) => {
            if (!value) {
              return callback(new Error("请输入手机号"));
            }
            setTimeout(() => {
              if (!validatemobile(value)) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            }, 100);
          };

          //密码校验
          function pwdValidator(_, value, callback) {
            if (
              /^(?![\d]+$)(?![a-zA-Z]+$)(?![_]+$)[\da-zA-Z_]{6,20}$/.test(value)
            ) {
              callback();
            } else {
              callback(
                new Error("数字、字母、下划线任意两种组合，且不能少于6位")
              );
            }
          }
          // 姓名校验
          function isValidName(_, value, callback) {
            if (!value) {
              return callback(new Error("请输入姓名"));
            } else {
              callback();
            }
          }
          // 执照编码校验
          function Tax_Number(_, value, callback) {
            if (!value) {
              return callback(new Error("请输入执照编码"));
            } else {
              callback();
            }
          }
          /**
           * 公司名称校验
           * */
          var companyNameC = (rule, value, callback) => {
            //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
            const re = /^[\u4e00-\u9fa5]+$/;
            if (!value) {
              return callback(new Error("请输入公司名称"));
            }
            setTimeout(() => {
              if (re.test(value.trim())) {
                callback();
              } else {
                callback(new Error("请输入正确的公司名称"));
              }
            }, 100);
          };
          return {
            activeName: "second",
            loading: false,
            loading1: false, //图片加载中
            Enterprise_Name: "",
            imageUrl: "",
            show: false,
            show1: false,
            dialogVisible: false,
            city: [],
            address: [],
            addressDetail: "",
            system_user_info1: {
              checkPass3: "",
              Enterprise_Info_SerialNumber: "",
              ID_Name: "",
              ID_SerialNumber: "",
              Pass_Ward: "",
              Admin_Type: "0",
              User_Number: "",
              Examine: "1",
            },
            enterprise_info: {
              Enterprise_Info_SerialNumber: "",
              Enterprise_Name: "",
              Tax_Number: "",
              Picture_Url: "",
              address: [],
              addressDetail: "",
              Postal_Code: "",
              Enterprise_Address: "",
              Calculation_SerialNumber: "C00000000000001",
              Industry_SubCategory_SerialNumber: "I01000000000001",
              Industry_Category_SerialNumber: "I00000000000001",
            },
            system_user_info: {
              checkPass: "",
              Admin_Type: "1",
              Enterprise_Info_SerialNumber: "",
              ID_Name: "",
              ID_SerialNumber: "",
              Pass_Ward: "",
              User_Number: "",
              Examine: "0",
            },
            options: [
              {
                label: "海伦镇",
                value: "海伦镇",
                longitude: "126.979878",
                latitude: "47.470439",
                Postal_Code: "01",
              },
              {
                label: "海北镇",
                value: "海北镇",
                longitude: "126.860067",
                latitude: "47.664534",
                Postal_Code: "02",
              },
              {
                label: "伦河镇",
                value: "伦河镇",
                longitude: "126.442795",
                latitude: "47.156756",
                Postal_Code: "03",
              },
              {
                label: "共合镇",
                value: "共合镇",
                longitude: "126.640387",
                latitude: "47.347124",
                Postal_Code: "04",
              },
              {
                label: "海兴镇",
                value: "海兴镇",
                longitude: "126.677986",
                latitude: "47.194942",
                Postal_Code: "05",
              },
              {
                label: "祥富镇",
                value: "祥富镇",
                longitude: "126.795941",
                latitude: "47.282837",
                Postal_Code: "06",
              },
              {
                label: "东风镇",
                value: "东风镇",
                longitude: "127.112271",
                latitude: "47.419528",
                Postal_Code: "07",
              },
              {
                label: "百祥镇",
                value: "百祥镇",
                longitude: "126.47013",
                latitude: "47.233388",
                Postal_Code: "08",
              },
              {
                label: "前进镇",
                value: "前进镇",
                longitude: "126.825654",
                latitude: "47.405557",
                Postal_Code: "09",
              },
              {
                label: "向荣镇",
                value: "向荣镇",
                longitude: "126.822762",
                latitude: "47.5126",
                Postal_Code: "10",
              },
              {
                label: "长发镇",
                value: "长发镇",
                longitude: "126.944347",
                latitude: "47.543249",
                Postal_Code: "11",
              },
              {
                label: "东林镇",
                value: "东林镇",
                longitude: "127.041463",
                latitude: "47.516606",
                Postal_Code: "12",
              },
              {
                label: "永和镇",
                value: "永和镇",
                longitude: "126.604933",
                latitude: "47.449245",
                Postal_Code: "13",
              },
              {
                label: "共荣镇",
                value: "共荣镇",
                longitude: "126.865259",
                latitude: "47.173773",
                Postal_Code: "14",
              },
              {
                label: "海南乡",
                value: "海南乡",
                longitude: "126.999377",
                latitude: "47.242298",
                Postal_Code: "15",
              },
              {
                label: "乐业乡",
                value: "乐业乡",
                longitude: "126.960178",
                latitude: "47.344062",
                Postal_Code: "16",
              },
              {
                label: "福民乡",
                value: "福民乡",
                longitude: "126.719425",
                latitude: "47.164045",
                Postal_Code: "17",
              },
              {
                label: "丰山乡",
                value: "丰山乡",
                longitude: "126.581503",
                latitude: "47.176053",
                Postal_Code: "18",
              },
              {
                label: "永富镇",
                value: "永富镇",
                longitude: "126.442652",
                latitude: "47.05417",
                Postal_Code: "19",
              },
              {
                label: "联发镇",
                value: "联发镇",
                longitude: "126.512375",
                latitude: "47.327557",
                Postal_Code: "20",
              },
              {
                label: "爱民乡",
                value: "爱民乡",
                longitude: "126.692562",
                latitude: "47.59392",
                Postal_Code: "21",
              },
              {
                label: "扎音河乡",
                value: "扎音河乡",
                longitude: "126.975571",
                latitude: "47.654621",
                Postal_Code: "22",
              },
              {
                label: "双录乡",
                value: "双录乡",
                longitude: "127.062659",
                latitude: "47.640831",
                Postal_Code: "23",
              },
            ],
            // 表单校验
            rules: {
              Pass_Ward: [{ validator: pwdValidator, trigger: "blur" }],
              checkPass: [{ validator: pwdValidator2, trigger: "blur" }],
              checkPass3: [{ validator: pwdValidator3, trigger: "blur" }],
              ID_SerialNumber: [{ validator: validatePass3, trigger: "blur" }],
              ID_Name: [{ validator: isValidName, trigger: "blur" }],
              User_Number: [{ validator: validatePass4, trigger: "blur" }],
              Enterprise_Name: [{ validator: companyNameC, trigger: "blur" }],
              Tax_Number: [{ validator: Tax_Number, trigger: "blur" }],
            },
          };
        },
        watch: {
          enterprise_info: {
            handler(val, oldval) {
              val.Enterprise_Info_SerialNumber = val.Tax_Number;
            },
            deep: true,
          },
        },
        mounted() {
          // this.getData()
          const _this = this;
          $.ajax({
            url: "./js/city.json",
            data: { action: "jQueryAjax" },
            type: "GET",
            success: function (data) {
              _this.city = data;
            },
            dataType: "json",
          });
        },
        methods: {
          a() {
            console.log(this.enterprise_info);
          },
          // tab栏切换
          handleClick(tab, event) {
            console.log(tab);
          },
          change(e) {
            console.log(e);
          },
          SelectAddressDetail(e) {
            let { latitude, longitude, Postal_Code } = this.options.filter(
              (item) => item.label == e
            )[0];
            console.log(longitude, latitude);
            this.enterprise_info.longitude = longitude;
            this.enterprise_info.latitude = latitude;
            this.enterprise_info.Postal_Code = Postal_Code;
          },
          // 提交员工表单
          submitForm(formName) {
            if (this.show1) {
              this.$message.error("该企业名未注册,请重新填写");
              return;
            }
            this.loading = true;
            let _this = this;
            _this.$refs[formName].validate((valid) => {
              if (valid) {
                $.ajax({
                  url: DomainName + "/Register_Employee",
                  type: "POST",
                  data: {
                    system_user_info: JSON.stringify({
                      system_user_info: [_this.system_user_info1],
                    }),
                    Enterprise_Name: _this.Enterprise_Name,
                  },
                  success: function (result) {
                    console.log(result);
                    if (result.Status == "success") {
                      _this.$message({
                        message: "注册成功,等待审核...",
                        type: "success",
                      });
                      window.location.href = "login.html";
                    } else {
                      _this.$message.error(result.Cause);
                    }
                  },
                  error: function (params) {
                    console.log(params);
                  },
                  complete: function () {
                    _this.loading = false;
                  },
                });
              } else {
                _this.loading = false;
                return false;
              }
            });
          },
          // 提交企业表单
          submitEnterpriseForm(formName) {
            let _this = this;
            if (this.show) {
              this.$message.error("该企业名已被注册,请重新填写");
              return;
            }
            if (
              _this.enterprise_info.Enterprise_Name == "" ||
              _this.enterprise_info.Enterprise_Name.Tax_Number == ""
            )
              return _this.$message.error("请完善企业信息");
            _this.loading = true;
            _this.$refs[formName].validate((valid) => {
              if (valid) {
                // 发送请求
                this.enterprise_info.Enterprise_Address =
                  this.address[0] +
                  "/" +
                  this.address[1] +
                  "/" +
                  this.address[2] +
                  "/" +
                  this.addressDetail;
                console.log(this.system_user_info);
                console.log(this.enterprise_info);
                $.ajax({
                  url: DomainName + "/Register_Enterprise",
                  type: "POST",
                  data: {
                    system_user_info: JSON.stringify({
                      system_user_info: [_this.system_user_info],
                    }),
                    enterprise_info: JSON.stringify({
                      enterprise_info: [_this.enterprise_info],
                    }),
                  },
                  success: function (result) {
                    console.log(result);
                    if (result.Status == "success") {
                      _this.loading = true;
                      _this.$message({
                        message: "恭喜你，注册成功",
                        type: "success",
                      });
                      window.location.href = "login.html";
                    } else {
                      _this.$message.error(result.Cause);
                    }
                  },
                  error: function (params) {
                    console.log(params);
                  },
                  complete: function () {
                    _this.loading = false;
                  },
                });
              }
            });
          },
          uploadBanner(file) {
            //上传图片
            let _this = this;
            _this.loading1 = true;
            new Compressor(file, {
              quality: 1,
              success(file) {
                const formData = new FormData();
                formData.append("file", file, file.name);
                let oFileReader = new FileReader();
                oFileReader.readAsDataURL(file);
                oFileReader.onload = function (e) {
                  $.ajax({
                    type: "POST",
                    url: DomainName + "/BusinessPIC",
                    data: {
                      Data: e.target.result,
                      DataLength: file.size,
                      FileName: file.name,
                    },
                    complete: function (XMLHttpRequest) {
                      _this.loading1 = false;
                      if (
                        XMLHttpRequest.getResponseHeader("REDIRECT") ==
                        "REDIRECT"
                      ) {
                        window.parent.document.location.href =
                          "../../../" +
                          XMLHttpRequest.getResponseHeader("CONTENTPATH");
                        _this.$message(Result.Picture_Url);
                      }
                    },
                    success: function (Result) {
                      console.log(Result);
                      console.log(file);
                      if (Result.Status == "success") {
                        _this.enterprise_info.Enterprise_Name =
                          Result.Data.Enterprise_Name;
                        _this.enterprise_info.Tax_Number =
                          Result.Data.Tax_Number;
                        _this.system_user_info.ID_Name =
                          Result.Data.Legal_Person;
                        _this.imageUrl = e.target.result;
                        _this.enterprise_info.Picture_Url = Result.Picture_Url;
                        // _this.IdentifyPicture(Result.Picture_Url, file.name)
                      } else {
                        _this.$message.error("上传失败");
                      }
                    },
                    error: function () {
                      _this.$message.error("操作失败，请稍后再试");
                    },
                    dataType: "json",
                  });
                };
              },
              error(err) {
                console.log(err.message);
              },
            });
          },
          handlePictureCardPreview(imageUrl) {
            this.dialogVisible = !this.dialogVisible;
          },
          handleRemove() {
            //删除图片
            this.imageUrl = "";
            this.enterprise_info.Enterprise_Name = "";
            this.enterprise_info.Tax_Number = "";
            this.system_user_info.ID_Name = "";
            this.enterprise_info.Picture_Url = "";
          },
          ChangeEnterpriseName(Enterprise_Name) {
            const this_ = this;
            $.ajax({
              type: "POST",
              url: DomainName + "/CheckRegisterAction",
              data: {
                Enterprise_Name,
              },
              complete: function (XMLHttpRequest) {
                if (
                  XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT"
                ) {
                  window.parent.document.location.href =
                    "../../../" +
                    XMLHttpRequest.getResponseHeader("CONTENTPATH");
                  _this.$message(Result.Picture_Url);
                }
              },
              success: function (Result) {
                console.log(Result);
                if (Result.Status == "success") {
                  this_.show = false;
                  this_.show1 = true;
                } else if (Result.Status == "fail") {
                  this_.show = true;
                  this_.show1 = false;
                }
              },
              error: function () {
                this_.$message.error("操作失败，请稍后再试");
              },
              dataType: "json",
            });
          },
          // 最终验证
          // checkForm(formName) {
          //     return new Promise((resolve, reject) => {
          //         resolve()
          //         reject()
          //     }).then(
          //         () => {

          //         },
          //         () => { console.log('error') }
          //     )
          // }
        },
      });
    </script>
  </body>
</html>
